<template>
  <div class="classify-container">
    <el-card>
      <!-- 搜索 -->
      <div class="header">
        <el-button type="primary" @click="addFn">添加分类</el-button>
        <el-input v-model="input" placeholder="请输入关键字" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchInp" />
        </el-input>
      </div>

      <!-- 表格 -->
      <div class="wrapper">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="image"
            label="图片"
            width="180"
          >
            <template v-slot="{row}">
              <img style="width: 180px;" :src="row.image" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="180"
          />
          <el-table-column
            prop="email"
            label="邮箱"
            width="180"
          />
          <el-table-column
            prop="phone"
            label="电话"
            width="180"
          />
          <el-table-column
            prop="address"
            label="地址"
            width="180"
          />
          <el-table-column
            prop="desc"
            label="介绍"
            width="180"
          />
          <el-table-column
            label="操作"
          >
            <template v-slot="{row}">
              <el-button
                size="mini"
                type="primary"
                @click="toDetail(row.id)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="del(row.id)"
              >删除</el-button>
            </template>

          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :page-size="limit"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>

    </el-card>
    <AddAgents
      ref="addAgents"
      :show-dialog.sync="visibleDialog"
      @updateEvent="getAgents"
    />

  </div>

</template>

<script>
import { getAgents, getAgentsNum, delAgents } from '@/api/agents'
import AddAgents from './components/addAgents.vue'
export default {
  components: { AddAgents },
  data() {
    return {
      input: '',
      tableData: [],
      limit: 2,
      start: 0,
      name_contains: '',
      total: 0,
      visibleDialog: false,
      list: [],
      type: 1

    }
  },
  created() {
    // 获取分类列表
    this.getAgents()
    this.getAgentsNum()
  },
  methods: {
    // 搜索功能
    async searchInp() {
      if (!this.input) {
        this.type = 1
        console.log(222, this.type)
        this.getAgents()
        this.getAgentsNum()
        return
      }
      const res = await getAgents({
        name_contains: this.input
      })
      console.log(this.input, res)
      console.log(res)
      this.list = res.data
      this.total = res.data.length
      this.limit = 2
      this.tableData = res.data.slice(0, 2)
      this.type = 2
      // this.total = this.tableData.length
    },
    // 获取分类列表
    async getAgents() {
      const res = await getAgents({
        _start: this.start,
        _limit: this.limit

      })
      console.log(116, res)
      this.tableData = res.data
    },

    // 获取页面数量
    async getAgentsNum() {
      const res = await getAgentsNum({
        name_contains: this.name_contains
      })
      console.log(115, res)
      this.total = res.data
      this.getAgents()
    },
    // 分页 页码发生改变是触发
    currentChange(page) {
      console.log(page)
      if (this.type === 1) {
        this.start = (page - 1) * this.limit
        // this.getAgentsNum()
        this.getAgents()
      } else {
        console.log('搜索分页')
        this.tableData = this.list.slice((page - 1) * 2, page * 2)
      }
    },
    // // 上一页
    // prevClick() {
    //   this.start -= 2
    //   this.getAgents()
    // },
    // // 下一页
    // nextClick() {
    //   this.start += 2
    //   this.getAgents()
    // },
    // 新增角色
    addFn() {
      this.visibleDialog = true
    },
    // 编辑角色
    toDetail(id) {
      this.visibleDialog = true
      // 调用子组件中的getRoleDetail函数，从而过去点击角色详情
      // 这里我们可以用ref来获取子组件实例，从而调用子组件
      this.$refs.addAgents.editAgentsId(id)
    },
    // 删除角色
    del(id) {
      this.$confirm('是否确认删除？', '提示', {
        type: 'warning'
      }).then(async() => {
        console.log('点击了确认')
        // 调用接口，实现删除
        await delAgents(id)
        // 当删除最后一页的最后一条，我们更新列表请求上一页数据(因为当前页的数据已经被删完了)
        if (this.tableData.length === 1 && this.page !== 1) {
          // 当渲染的列表数据长度等于1时说明页面只剩下一条数据了
          // 且当前页不能是第一页,否则减1就变成0了
          this.page--
        }
        // 更新列表
        this.getAgents()
      }).catch(err => {
        console.log('点击了取消', err)
      })
    }
  }

}
</script>

  <style lang="scss" scoped>
  .classify {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }

  .header{
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #eee;

    .el-input{
      width: 600px;

    }
  }
  .wrapper{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  </style>

